<script lang="ts" setup>
import to from 'await-to-js'
import Detail from './detail.vue'
import OneTable from '@/component/public/table/oneTable.vue'
import type { UserInfo, HandleType } from './data'
import { getOperationList } from '@/utils/data'

defineOptions({
  name: 'TableList'
})

const activeName = ref('1')
const defaultForm = () => {
  return {
    betestedStatus: activeName.value === '1' ? '已测试' : '待测试'
  }
}

const tableData = ref<any[]>([])
const total = ref(0)
const tableRef = ref()
const loading = ref(true)
const searchForm = ref<any>(defaultForm())
const isDialog = ref(false)
const currentRow = ref<UserInfo>()
const type = ref<HandleType>('add')

watch(
  () => activeName.value,
  (val) => {
    searchForm.value.betestedStatus = val === '1' ? '已测试' : '待测试'
    searchTable()
  }
)

function searchTable() {
  tableRef.value?.resetPage()
}
function resetTable() {
  searchForm.value = defaultForm()
  searchTable()
}
const getList = async (val: UserInfo) => {
  let params = { ...val, ...searchForm.value }
  tableData.value = []
  loading.value = true
  const [err, res] = await to(getOperationList(params))
  loading.value = false
  if (err) return
  tableData.value = res.list || []
  total.value = res.total || 0
}

const handle = (currentType: HandleType, row?: UserInfo) => {
  currentRow.value = row
  type.value = currentType
  isDialog.value = true
}

const handlleDelete = async (row: UserInfo) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该用户?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  const [err] = await to(deleteUser(row.id))
  if (err) return
  ElMessage.success('删除成功')
  searchTable()
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  search && searchTable()
}

const handleShow = (val) => {
  window.open(`/demo/ability/${val.abilityId}`)
}

const handleExport = () => {}
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="已测试能力" name="1"></el-tab-pane>
      <el-tab-pane label="待测试申请" name="2"></el-tab-pane>
    </el-tabs>
    <div class="d-header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="能力名称:">
          <el-input v-model="searchForm.name" placeholder="能力名称" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item label="申请人:">
          <el-input v-model="searchForm.uploadUser" placeholder="申请人" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTable()" icon="Search">查询</el-button>
          <el-button @click="resetTable" icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="d-content">
      <one-table ref="tableRef" :data="tableData" :total="total" border :loading="loading" @update="getList" row-key="id">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="Request_No" label="申请单号" align="center" width="100" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="能力名称 " align="center" width="140" show-overflow-tooltip />
        <el-table-column prop="tag" label="版本号" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="type" label="能力分类" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="method" label="交付方式" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="betestedStatus" label="测试状态" align="center" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.betestedStatus === '已测试' ? 'success' : row.betestedStatus === '待测试' ? '' : 'danger'">
              {{ row.betestedStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="描述" align="center" width="140" show-overflow-tooltip />
        <el-table-column prop="belong" label="归属省" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="provider" label="提供方" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="contact" label="联系人" align="center" show-overflow-tooltip />
        <el-table-column prop="contactPhone" label="联系电话" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="uploadUser" label="申请人" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="uploadTime" label="申请时间" align="center" width="160" show-overflow-tooltip />

        <el-table-column prop="operator" label="操作" width="130px" align="center" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.betestedStatus === '待测试'" link type="primary" size="small" icon="Pointer" @click="handle('edit', row)">
              测试
            </el-button>
            <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">详情</el-button>
          </template>
        </el-table-column>
      </one-table>
    </div>
    <Detail v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
  </div>
</template>

<style scoped lang="scss"></style>
./data
